﻿@{
    Layout.Title = T("Edit Questions for the Article").Text;

    Style.Require("PmpNetwork.FancyBox");
    Style.Require("PmpNetwork.WikiArticle.Question");
    
    Script.Require("jQuery").AtHead();
    Script.Require("PmpNetwork.WikiArticle.Question");
    Script.Require("PmpNetwork.FancyBox");
    
    Script.Require("CKEditor");
}
<div class="manage">
    <a class="create-question-button button primaryAction" href="javascript:;">@T("Add New Question")</a>
</div>
<div style="clear: both;"></div>
<div class="question-items">
    <div id="question-item-template" class="question-item" style="display: none;">
        <input type="hidden" class="question-id" />
        <div class="number-area">99</div>
        <div class="commands">
            <a class="question-down" href="javascript:;">@T("Move Down")</a> |
            <a class="question-up" href="javascript:;">@T("Move Up")</a> |
            <a class="question-delete" href="javascript:;">@T("Delete")</a>
        </div>
        <div style="clear: both;"></div>
        <div class="content-area">
            <a class="button-edit" href="javascript:;">@T("Edit")</a>
            <div class="text-question empty"></div>
            <div class="options-area">
                <fieldset>
                    <legend style="float: left;">@T("The list of options for the question")</legend>
                    <div class="manage">
                        <a class="create-option-button button primaryAction" href="javascript:;">@T("Add New Option")</a>
                    </div>
                    <table class="items options-table" summary="@T("The list of options for the question")">
                        <colgroup>
                            <col style="width: 30px;"/>
                            <col style="width: 30px;"/>
                            <col style="width: 100%;"/>
                            <col style="width: 30px;"/>
                            <col style="width: 30px;"/>
                            <col style="width: 30px;"/>
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col">&nbsp;</th>
                                <th scope="col">@T("Is Correct")</th>
                                <th scope="col">@T("Option Text")</th>
                                <th scope="col">&nbsp;</th>
                                <th scope="col">&nbsp;</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="row-template option-row">
                                <td class="option-index"></td>
                                <td><input type='checkbox' class="check-is-correct" /></td>
                                <td><input type="text" class='large text' /><input type="hidden" class="option-id" /></td>
                                <td><a class='option-up' href="javascript:;">@T("Up")</a></td>
                                <td><a class='option-down' href="javascript:;">@T("Down")</a></td>
                                <td><a class='option-delete' href="javascript:;">@T("Delete")</a></td>
                            </tr>
                        </tbody>
                    </table>
                </fieldset>
                
            </div>
            <div>@T("The reason for the answer, whether correct or not (can be left blank)")</div>  
            <div class="question-reason-container">                
                <a class="button-edit" href="javascript:;">@T("Edit")</a>
                <div class="question-reason empty"></div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

<div class="manage">
    <a class="create-question-button button primaryAction" href="javascript:;">@T("Add New Question")</a>
</div>
<div class="form-commands">
    <a id="save-button" class="button primaryAction" href="javascript:;">@T("Save")</a>
</div>
<div style="clear: both;"></div>
<div id="edit-form">
    <div class="field-input">
        @Html.TextArea("textEdit", "", 25, 80,
	        new Dictionary<string,object> {
		    {"class", "html tinymce"},
            {"style", "width:100%; height: 400px"}
	        })
    </div>
    <div style="margin-top: 10px;">
        <a class="editform-done-button button primaryAction" href="javascript:;">@T("Done")</a>
        <a class="editform-cancel-button button primaryAction" href="javascript:;">@T("Cancel")</a>
    </div>
</div>
<script type="text/javascript">
    (function ($, undefined) {
        var localizedText = {
            emptyText: '<i>@T("Click \\'Edit\\' button on the top - right to edit this text...")</i>',
            editQuestion: '@T("Edit Question")',
            addQuestion: '@T("Add New Question")',
            moveUp: '@T("Move Up")',
            moveDown: '@T("Move Down")',
            'delete': '@T("Delete")',
            deleteConfirm: '@T("Are you sure you want to delete?")',
            errQuestionText: '@T("The question No [0] is left blank.")',
            errNoOption: '@T("The question No [0] has too few options. A question must have at least 2 options.")',
            errOptionBlank: '@T("The question No [0] has an option that is left blank.")',
            errEditBlank: '@T("The text area is blank. Are you sure you want to continue?")',
            errNoQuestion: '@T("There is no question to save...")',
            errNoCorrectOption: '@T("The question No [0] has no correct option.")'
        };
        
        $(document).ready(function () {
            $.adminQuestions({
                    token: '@Html.AntiForgeryTokenValueOrchard()',
                    action: '@Url.Action("Questions", "WikiAdmin", new { id = ViewBag.ArticleId})'
                },
                '.create-question-button',
                localizedText,
                [
                    @foreach (var question in ViewBag.Questions) {
                    <text>
                    {
                        id: '@(question.Id)',
                        text: '@(new MvcHtmlString(question.Text.Replace("\n", "\\n")))',
                        reason: '@(new MvcHtmlString(question.Reason.Replace("\n", "\\n")))',
                        options: [
                            @if (question.Options != null) {
                            foreach (var option in question.Options) {
                            <text>
                            {
                                id: '@option.Id',
                                text: '@(Html.Raw(option.Text.Replace("\n", "\\n")))',
                                isCorrect: @(option.IsCorrect.ToString().ToLower())
                            },
                            </text>
                            }
                            }
                        ]
                    },
                    </text>
                    }
                ]);
        });
    })(jQuery);
</script>